<template>
	<div class="home" v-if="categorys">
		<navbar></navbar>
		<van-tabs v-model="active" color="#FB7299" class="father">
			<div class="child" @click="getEditcategory">
				<van-icon name="setting-o" size="5vw" color="#666" />
			</div>
			<van-tab v-for="(item, index) in categorys" :key="index" :title="item.title">
				<van-list v-model="item.loading" :finished="item.finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
					<div class="detailparents">
						<detail :detailitem="categoryitem" v-for="(categoryitem, categoryindex) in item.list" :key="categoryindex" class="detailitem" aaa="这是一个aaa"></detail>
					</div>
				</van-list>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import navbar from '../components/common/Navbar.vue';
import detail from './Detail.vue';

export default {
	data() {
		return {
			categorys: [],
			active: 0
		};
	},
	// 只有被keep-alive包裹的页面才有这个方法
	activated() {
		if(localStorage.getItem('category')) {
			let newcat=JSON.parse(localStorage.getItem('category'))
			this.categorys=this.changecategory(newcat)
			this.selectArticle()
		}
	},
	methods: {
		async category() {
			// 判断本地存储里是否有数据
			if(localStorage.getItem('category')){
				console.log('有数据')
				return
			}
			const res = await this.$http.get('/category');
			console.log(res)
			console.log(111)
			this.categorys=this.changecategory(res.data);
			this.selectArticle();
		},
		changecategory(data) {
			console.log(data)
			const category1 = (data||[]).map(item => {
				item.list = [];
				item.page = 0;
				item.pagesize = 10;
				item.loading = true;
				item.finished = false;
				return item;
			});
			return category1
			// console.log(category1);
			// this.categorys = category1;
			// this.selectArticle();
		},
		// 获取视频列表
		async selectArticle() {
			const categoryitem = this.categoryItem();
			const res = await this.$http.get('/detail/' + categoryitem._id, {
				params: {
					page: categoryitem.page,
					pagesize: categoryitem.pagesize
				}
			});
			console.log(res);
			console.log(this.categorys);
			// categoryitem.list = res.data;
			categoryitem.list.push(...res.data); //追加数据
			categoryitem.loading = false;
			// 如果没有数据的话,请求回来的数据长度小于10条就说明没有数据了
			if (res.data.length < categoryitem.pagesize) {
				categoryitem.finished = true;
			}
		},
		categoryItem() {
			const categoryitem = this.categorys[this.active];
			return categoryitem;
		},
		onLoad() {
			console.log('已经到底部了');
			const categoryitem = this.categoryItem();
			console.log(categoryitem);
			setTimeout(() => {
				categoryitem.page += 1;
				this.selectArticle();
			}, 600);
		},
		getEditcategory() {
			this.$router.push('/editcategory');
		}
	},
	created() {
		this.category();
	},
	components: {
		navbar,
		detail
	},
	watch: {
		active() {
			this.selectArticle();
		}
	}
};
</script>

<style lang="less">
.home {
	background-color: white;
}
.detailparents {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	.detailitem {
		width: 45%;
		margin: 5px 0;
	}
}
.father {
	position: relative;
	.child {
		width: 36px;
		height: 43px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		background-color: white;
	}
}
</style>
